import React, { useEffect, useRef }  from 'react';
import * as echarts from 'echarts';
export const Month = (props) => {
  const chartRef = useRef()
  const options = {
    title: {
      text: '月营业额'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['9月份营业额']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '9月份营业额',
        type: 'line',
        stack: 'Total',
        data: [4567, 6123, 5567, 4123, 5456, 7542, 9854,4867, 5123, 4567, 3123, 6456, 7654, 8854,6567, 7123, 8567, 4123, 5456, 6542, 8854,5567, 4123, 3567, 5123, 5789, 6876, 8912,8741,7445]
      }
    ]
  }

  useEffect(() => {
      // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
      const chart = echarts.init(chartRef.current)

      // 设置图表实例的配置项和数据
      chart.setOption(options)

      // 组件卸载
      return () => {
          // myChart.dispose() 销毁实例。实例销毁后无法再被使用
          chart.dispose()
      }
  },[])

  return(
      // 宽度要大，不然y轴有些名称可能不会显示
      <div style={{width: "800px", height: "400px"}} ref={chartRef}></div>
  )
}